﻿/* Containers */
.pf-container.pf-show-buffering-container .pf-control-container {
    display: none;
}

.pf-loader-container .pf-button, .pf-error-container .pf-button, .pf-control-container .pf-button {
    width: 100px;
    height: 100px;
    font-size: 60px;
}

.pf-loader-container .pf-button-container, .pf-error-container .pf-button-container, .pf-control-container .pf-button-container {
    border-width: 3px;
}

/* Buffering Control */
.pf-buffering-control:indeterminate {
    width: 60px;
    height: 60px;
}

.pf-buffering-control::-ms-fill {
    animation-name: -ms-ring;
}

/* Control Panel */
.pf-container .pf-control-panel {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 15px;
}

.pf-container .pf-control-panel {
    background-color: transparent !important;
}

.pf-container .pf-control-panel > * {
    margin: 0 15px;
}

.pf-container .pf-control-panel > *:not(.pf-play-pause-control):not(.pf-rewind-control):not(.pf-fast-forward-control):not(.pf-skip-previous-control):not(.pf-skip-next-control):not(.pf-elapsed-time-control):not(.pf-remaining-time-control):not(.pf-timeline-control) {
    display: none;
}

.pf-container .pf-control-panel > *:not(.pf-play-pause-control) {
    width: 70px;
    height: 70px;
    font-size: 42px;
}

.pf-container .pf-control-panel .pf-elapsed-time-control, .pf-container .pf-control-panel .pf-remaining-time-control, .pf-container .pf-control-panel .pf-total-time-control  {
    position: absolute;
    bottom: 15px;
    height: 15px;
    font-size: 15px;
}

.pf-container .pf-control-panel .pf-elapsed-time-control  {
    left: 15px;
}

.pf-container .pf-control-panel .pf-remaining-time-control {
    right: 15px;
}

.pf-container .pf-control-panel .pf-total-time-control {
    right: 15px;
}


.pf-container .pf-control-panel .pf-timeline-control {
    position: absolute;
    left: 80px;
    right: 80px;
    bottom: 20px;
    width: auto;
    height: 38px; /* thumb height + timeline height */
    z-index: 1;
}

.pf-container .pf-control-panel .pf-timeline-control input[type=range]::-ms-track, .pf-container .pf-control-panel .pf-timeline-control progress {
    height: 3px; /* timeline height */
    margin-top: 35px; /* thumb height */
    padding-left: 15px; /* thumb width / 2 */
    padding-right: 15px; /* thumb width / 2 */
}

.pf-container .pf-control-panel .pf-timeline-control input[type=range]::-ms-thumb {
    width: 30px; /* thumb width */
    height: 35px; /* thumb height */
    margin-bottom: 38px; /* thumb height + timeline height */
}

.pf-container .pf-captions-container {
    padding: 65px 15px;
}

.pf-container.pf-full-screen .pf-captions-container {
    padding: 100px 15px;
}

.pf-container.pf-full-screen .pf-cue {
    font-size: 30px;
}

@media screen and (-ms-view-state: snapped) {
    .pf-container .pf-control-panel .pf-control:not(.pf-play-pause-control) {
        display: none !important;
    }
}

.pf-slider-marker {
    height: 3px;
    top: 35px;
}

.pf-slider-container .pf-slider-marker-container {
    left:0;
    right:0;
    margin-left: 15px;
    margin-right: 15px;
    width: auto;
}

.pf-slider-container .pf-slider-thumbnail-container {
    left:0;
    right:0;
    margin-left: 15px;
    margin-right: 15px;
    width: auto;
}

.pf-slider-thumbnailView {
    border: solid;
    border-width: 2px;
    top: -66px;
}